<!DOCTYPE html>
<html lang="en">
 {% load static %}
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用户信息管理</title>

    <link rel="stylesheet" href="/media/css/bootstrap-off-canvas-nav.css">
	<!-- <link rel="stylesheet" href="/boot/static/css/userInfo.css"> -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="/static/js/bootstrap-off-canvas-nav.js"></script>
    <link href="/media/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script type="text/javascript" src="/static/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="/static/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
		<link rel="stylesheet" href="/media/video/style1.css">
	<link rel="stylesheet" href="/media/video/style.css">
	 <link rel="stylesheet" href="/media/video/style2.css">
	 <link rel="stylesheet" href="/media/back/back.css">
	<style>
		.font-type {
		            color: white;
		        }

		.container {
		     width: 900px;
		     height: 650px;
		     margin: auto;
		     /* border: 1px solid #ccc; */
		     /* padding: 20px; */
		     box-sizing: border-box;
		     /* outline: 1px solid red; */
		     position: relative; /* Set position to enable movement */
		     top: 100px; /* Move 50px down */
		     left: 50px; /* Move 100px to the right */
		 }

		        .position1 {
		            position: relative;
		            float: left;
		            width: 20%;
		            height: 50px;
		            text-align: center;
		            line-height: 50px;
		        }

		        @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";

		        body {
		            position: relative;
		            overflow-x: hidden;
		        }

		        body,
		        html {
		            height: 100%;
		            background-color: white;
		        }

		        .nav .open>a {
		            background-color: transparent;
		        }

		        .nav .open>a:hover {
		            background-color: transparent;
		        }

		        .nav .open>a:focus {
		            background-color: transparent;
		        }

		        /*-------------------------------*/
		        /*           Wrappers            */
		        /*-------------------------------*/
		        #wrapper {
		            height: 0px;
		            -moz-transition: all 0.5s ease;
		            -o-transition: all 0.5s ease;
		            -webkit-transition: all 0.5s ease;
		            padding-left: 0;
		            transition: all 0.5s ease;
		        }

		        #wrapper.toggled {
		            padding-left: 220px;
		        }

		        #wrapper.toggled #sidebar-wrapper {
		            width: 220px;
		        }

		        #wrapper.toggled #page-content-wrapper {
		            margin-right: -220px;
		            position: absolute;
		        }

		        #sidebar-wrapper {
		            -moz-transition: all 0.5s ease;
		            -o-transition: all 0.5s ease;
		            -webkit-transition: all 0.5s ease;
		            background: #1a1a1a;
		            height: 100%;
		            left: 220px;
		            margin-left: -220px;
		            overflow-x: hidden;
		            overflow-y: auto;
		            transition: all 0.5s ease;
		            width: 0;
		            z-index: 1000;
		        }

		        #sidebar-wrapper::-webkit-scrollbar {
		            display: none;
		        }

		        #page-content-wrapper {
		            padding-top: 70px;
		            width: 100%;
		        }

		        /*-------------------------------*/
		        /*     Sidebar nav styles        */
		        /*-------------------------------*/
		        .sidebar-nav {
		            list-style: none;
		            margin: 0;
		            padding: 0;
		            position: absolute;
		            top: 0;
		            width: 220px;
		        }

		        .sidebar-nav li {
		            display: inline-block;
		            line-height: 20px;
		            position: relative;
		            width: 100%;
		        }

		        .sidebar-nav li:before {
		            background-color: #1c1c1c;
		            content: '';
		            height: 100%;
		            left: 0;
		            position: absolute;
		            top: 0;
		            -webkit-transition: width 0.2s ease-in;
		            transition: width 0.2s ease-in;
		            width: 3px;
		            z-index: -1;
		        }

		        .sidebar-nav li:first-child a {
		            background-color: #1a1a1a;
		            color: #ffffff;
		        }

		        .sidebar-nav li:nth-child(2):before {
		            background-color: #402d5c;
		        }

		        .sidebar-nav li:nth-child(3):before {
		            background-color: #4c366d;
		        }

		        .sidebar-nav li:nth-child(4):before {
		            background-color: #583e7e;
		        }

		        .sidebar-nav li:nth-child(5):before {
		            background-color: #64468f;
		        }

		        .sidebar-nav li:nth-child(6):before {
		            background-color: #704fa0;
		        }

		        .sidebar-nav li:nth-child(7):before {
		            background-color: #7c5aae;
		        }

		        .sidebar-nav li:nth-child(8):before {
		            background-color: #8a6cb6;
		        }

		        .sidebar-nav li:nth-child(9):before {
		            background-color: #987dbf;
		        }

		        .sidebar-nav li:hover:before {
		            -webkit-transition: width 0.2s ease-in;
		            transition: width 0.2s ease-in;
		            width: 100%;
		        }

		        .sidebar-nav li a {
		            color: #dddddd;
		            display: block;
		            padding: 10px 15px 10px 30px;
		            text-decoration: none;
		        }

		        .sidebar-nav li.open:hover before {
		            -webkit-transition: width 0.2s ease-in;
		            transition: width 0.2s ease-in;
		            width: 100%;
		        }

		        .sidebar-nav .dropdown-menu {
		            background-color: #222222;
		            border-radius: 0;
		            border: none;
		            box-shadow: none;
		            margin: 0;
		            padding: 0;
		            position: relative;
		            width: 100%;
		        }

		        .sidebar-nav li a:hover,
		        .sidebar-nav li a:active,
		        .sidebar-nav li a:focus,
		        .sidebar-nav li.open a:hover,
		        .sidebar-nav li.open a:active,
		        .sidebar-nav li.open a:focus {
		            background-color: transparent;
		            color: #ffffff;
		            text-decoration: none;
		        }

		        .sidebar-nav>.sidebar-brand {
		            font-size: 20px;
		            height: 65px;
		            line-height: 44px;
		        }

		        /*-------------------------------*/
		        /*       Hamburger-Cross         */
		        /*-------------------------------*/
		        .hamburger {
		            background: black;
		            border: none;
		            display: block;
		            height: 32px;
		            margin-left: 15px;
		            position: fixed;
		            top: 20px;
		            width: 32px;
		            z-index: 999;
		        }

		        .hamburger:hover {
		            outline: none;
		        }

		        .hamburger:focus {
		            outline: none;
		        }

		        .hamburger:active {
		            outline: none;
		        }

		        .hamburger.is-closed:before {
		            -webkit-transform: translate3d(0, 0, 0);
		            -webkit-transition: all 0.35s ease-in-out;
		            color: #ffffff;
		            content: '';
		            display: block;
		            font-size: 14px;
		            line-height: 32px;
		            opacity: 0;
		            text-align: center;
		            width: 100px;
		        }

		        .hamburger.is-closed:hover before {
		            -webkit-transform: translate3d(-100px, 0, 0);
		            -webkit-transition: all 0.35s ease-in-out;
		            display: block;
		            opacity: 1;
		        }

		        .hamburger.is-closed:hover .hamb-top {
		            -webkit-transition: all 0.35s ease-in-out;
		            top: 0;
		        }

		        .hamburger.is-closed:hover .hamb-bottom {
		            -webkit-transition: all 0.35s ease-in-out;
		            bottom: 0;
		        }

		        .hamburger.is-closed .hamb-top {
		            -webkit-transition: all 0.35s ease-in-out;
		            background-color: rgba(255, 255, 255, 0.7);
		            top: 5px;
		        }

		        .hamburger.is-closed .hamb-middle {
		            background-color: rgba(255, 255, 255, 0.7);
		            margin-top: -2px;
		            top: 50%;
		        }

		        .hamburger.is-closed .hamb-bottom {
		            -webkit-transition: all 0.35s ease-in-out;
		            background-color: rgba(255, 255, 255, 0.7);
		            bottom: 5px;
		        }

		        .hamburger.is-closed .hamb-top,
		        .hamburger.is-closed .hamb-middle,
		        .hamburger.is-closed .hamb-bottom,
		        .hamburger.is-open .hamb-top,
		        .hamburger.is-open .hamb-middle,
		        .hamburger.is-open .hamb-bottom {
		            height: 4px;
		            left: 0;
		            position: absolute;
		            width: 100%;
		        }

		        .hamburger.is-open .hamb-top {
		            -webkit-transform: rotate(45deg);
		            -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);
		            background-color: #ffffff;
		            margin-top: -2px;
		            top: 50%;
		        }

		        .hamburger.is-open .hamb-middle {
		            background-color: #ffffff;
		            display: none;
		        }

		        .hamburger.is-open .hamb-bottom {
		            -webkit-transform: rotate(-45deg);
		            -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);
		            background-color: #ffffff;
		            margin-top: -2px;
		            top: 50%;
		        }

		        .hamburger.is-open:before {
		            -webkit-transform: translate3d(0, 0, 0);
		            -webkit-transition: all 0.35s ease-in-out;
		            color: #ffffff;
		            content: '';
		            display: block;
		            font-size: 14px;
		            line-height: 32px;
		            opacity: 0;
		            text-align: center;
		            width: 100px;
		        }

		        .hamburger.is-open:hover before {
		            -webkit-transform: translate3d(-100px, 0, 0);
		            -webkit-transition: all 0.35s ease-in-out;
		            display: block;
		            opacity: 1;
		        }

		        /*-------------------------------*/
		        /*          Dark Overlay         */
		        /*-------------------------------*/
		        .overlay {
		            position: fixed;
		            display: none;
		            width: 100%;
		            height: 100%;
		            top: 0;
		            left: 0;
		            right: 0;
		            bottom: 0;
		            background-color: rgba(0, 0, 0, 0.4);
		            z-index: 1;
		        }

		/* 顶部栏 */
		        .top_div {
		            background-color: #ffffff;
		            padding-top: 10px;
		        }

		        /* 模态框 */
		        .dark-matter {

		            /* margin-left: auto; */

		            /* margin-right: auto; */

		            /* max-width: 500px; */

		            background: #555;

		            /* padding: 20px 30px 20px 30px; */

		            font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
		            color: #D3D3D3;
		            text-shadow: 1px 1px 1px #444;

		            /* border: none; */
		            /* border-radius: 5px; */

		            /* -webkit-border-radius: 5px; */
		            /* -moz-border-radius: 5px; */
		        }

		        .dark-matter form {
		            width: 100%;
		        }

		        .dark-matter h1 {

		            padding: 0px 0px 10px 40px;

		            display: block;

		            border-bottom: 1px solid #444;

		            margin: -10px -30px 30px -30px;
		        }

		        .dark-matter h1>span {

		            display: block;

		            font-size: 11px;

		        }

		        .dark-matter label {

		            display: block;

		            margin: 0px 0px 5px;

		        }

		        .dark-matter label>span {

		            float: left;

		            width: 20%;

		            text-align: right;

		            padding-right: 10px;

		            margin-top: 10px;

		            font-weight: bold;

		        }

		        .dark-matter input[type="text"],
		        .dark-matter input[type="email"],
		        .dark-matter textarea,
		        .dark-matter select {

		            border: none;

		            color: #525252;

		            height: 25px;

		            line-height: 15px;

		            margin-bottom: 16px;

		            margin-right: 6px;

		            margin-top: 2px;

		            outline: 0 none;

		            padding: 5px 0px 5px 5px;

		            width: 70%;

		            border-radius: 2px;

		            -webkit-border-radius: 2px;

		            -moz-border-radius: 2px;

		            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

		            background: #DFDFDF;

		        }

		        .dark-matter select {

		            background: #DFDFDF url('/boot/media/images/down2.png') no-repeat right;

		            appearance: none;

		            -webkit-appearance: none;

		            -moz-appearance: none;

		            text-indent: 0.01px;

		            text-overflow: '';

		            width: 70%;

		            height: 35px;

		            color: #525252;

		            line-height: 25px;

		        }

		        .dark-matter textarea {

		            height: 100px;

		            padding: 5px 0px 0px 5px;

		            width: 70%;

		        }

		        .dark-matter .button {
		            margin: 10px 100px;
		            background: #FFCC02;

		            border: none;

		            padding: 10px 70px 10px 70px;

		            color: #585858;

		            border-radius: 4px;

		            -moz-border-radius: 4px;

		            -webkit-border-radius: 4px;

		            text-shadow: 1px 1px 1px #FFE477;

		            font-weight: bold;

		            box-shadow: 1px 1px 1px #3D3D3D;

		            -webkit-box-shadow: 1px 1px 1px #3D3D3D;

		            -moz-box-shadow: 1px 1px 1px #3D3D3D;

		        }

		        .dark-matter .button:hover {
		            color: #333;
		            background-color: #EBEBEB;

		        }

		/* 总背景 */
		        #main {
					/* width: 100%; */
					width: 95%;
					float: right;
		            height: 90%;
		            /* background: liner-gradient(45deg, #7a8792, #404e60); */
		            background-color: #93a2af;
		            overflow: auto;
		            position: relative;
		        }

		        .content_div {
		            height: 90%;
					/* width: 99%; */
					/* float: right; */
		            /* background: liner-gradient(45deg, #7a8792, #404e60); */
		            background-color: #93a2af;
		            padding: 0px 18px;
		        }

		        #left_div {
		            float: left;
		            width: 45%;
		            height: 92%;
		            background-color: #5a626b;
		            border-radius: 10px 10px 0px 0px;
		            /* box-shadow: 10px 3px 0px 10px rgba(0, 0, 0, 0.6); */
		        }

		        #left_div .container-fluid .row {
		            border-radius: 10px 10px 0px 0px;
		        }

		        #left_div input {
		            margin: 10px;
		        }

		        #left_div select {
		            background: #DFDFDF url('/boot/media/images/down2.png') no-repeat;
		            background-position: 125px;
		            background-size: 30px 40px;
		            margin-top: 10px;
		            appearance: none;

		            -webkit-appearance: none;
		            -moz-appearance: none;
		            text-indent: 0.01px;
		            text-overflow: '';
		            color: #1a1a1a;
		            line-height: 35px;
		            width: 70%;
		            height: 100%;
		            /*
		            color: #525252;
		            line-height: 25px; */
		        }
		        /* #leftTop-div {
		            border-radius: 100px 15px 0px 0px;
		        } */

		/* 右侧可信人员外边框 */
		        #right_div {
					float: right;
/* 		            float: left;
		            width: 45%;
		            height: 95%;
		            margin-left: 100px; */
					width: 45%;
					height: 95%;
					margin-left: 100px;
		            background-color: #5a636c;
		            border-radius: 10px;
		        }

		/* 右侧可信人员内填充 */
		        #monitorcontrol_content_div {
		            margin: 10px 10px;
		            height: 95%;
		            /* border: 1px ridge #222943; */
		            /* box-shadow: -3px 3px 10px 10px rgba(0, 0, 0, 0.4); */
		            border-radius: 10px;

		        }
		/* 右侧可信人员顶部标题处 */
		        #monitorcontrol_content_top_div {
		            height: 30px;

		            text-align: center;
		            font-size: 20px;
		            color: #ffffff;
		            border-radius: 10px 10px 0px 0px;
		        }

		/* 右侧高度 */
		        #monitorcontrol_content_body_div {
		            height: 500px;
		            overflow-y: auto;
		        }

		        #monitorcontrol_content_div li {
		            color: #ffffff;
		            padding: 20px;
		            cursor: pointer;
		        }

		        #monitorcontrol_content_div li:hover {
		            color: #62b8f5;
		            /* background-color: #402d5c; */
		        }

		        #monitorControl1_div {
		            margin-left: 10px;
		            width: 21%;
		            height: 600px;
		            float: left;
		            background-color: #27304c;
		        }

		        .left_top_div {
		            height: 70px;
		            font-size: 20px;
		            font-family: 'Times New Roman', Times, serif;
		            line-height: 70px;
		        }

		/* 左侧查询+导出按钮大小 */
		        .mybtn {
		            padding: 5px 50px;
		        }

		/* 左侧表头颜色 */
		        .tableDiv td {
		            border: 0;
		            color: #fff;
		        }

		        .tableDiv tr:hover {
		            background-color: #38466b;
		        }

		        #left_div input {
		            border: 0;
		            content: '年月日';
		        }

		/* 首页+人员管理 */
		        .color-div {
		            /* background: #ffffff; */
					background: #93a2af;
		        }

		/* 左侧可信人员内填充 */
		        #left-content-div {
		            background-color: #5a626b;
					/* width: 70%; */
					/* width: 700px; */
					/* padding: 10px 15px 10px 30px; */
		            height: 580px;
					/* float: right; */
		            border-radius: 0px 0px 10px 10px;
		            overflow-y: auto;
		            /* overflow:scroll; */
		        }

		        #left-content-div::-webkit-scrollbar,
		        #monitorcontrol_content_body_div::-webkit-scrollbar,
		        .bleftDiv ::-webkit-scrollbar {
		            /*滚动条整体样式*/
		            width: 10px;
		            /*高宽分别对应横竖滚动条的尺寸*/
		            height: 1px;
		        }

		        #left-content-div::-webkit-scrollbar-thumb,
		        #monitorcontrol_content_body_div::-webkit-scrollbar-thumb,
		        .bleftDiv ::-webkit-scrollbar-thumb {
		            /*滚动条里面小方块*/
		            border-radius: 10px;
		            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7);
		            background: #535353;
		        }

		        #left-content-div::-webkit-scrollbar-track,
		        #monitorcontrol_content_body_div::-webkit-scrollbar-track,
		        .bleftDiv ::-webkit-scrollbar-track {
		            /*滚动条里面轨道*/
		            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		            border-radius: 10px;
		            /* background: #EDEDED; */
		            background: rgba(0, 0, 0, 0.05);
		        }

		        #allocForm select {
		            /* background: #DFDFDF url('/static/images/down2.png') no-repeat;
		            background-position: 125px;
		            background-size: 30px 40px; */
		            margin-top: 10px;
		            /* appearance: none; */
		            /* -webkit-appearance: none;
		            -moz-appearance: none; */
		            text-indent: 0.01px;
		            text-overflow: '';
		            color: #1a1a1a;
		            line-height: 35px;
		            width: 70%;
		            height: 100%;
		        }

		        #draft_search,
		        #tru_search {
		            background-image: url('https://static.runoob.com/images/mix/searchicon.png');
		            /* 搜索按钮 */
		            background-position: 10px 12px;
		            /* 定位搜索按钮 */
		            background-repeat: no-repeat;
		            /* 不重复图片 */
		            font-size: 16px;
					/* 搜索框大小 */
		            padding: 8px 5px 8px 40px;
		            border: 1px solid #ddd;
		            margin-bottom: 12px;
		        }

		        #photoDiv{
		            overflow:auto;
		        }
	</style>
</head>

<body>
    <div class="modal fade" id="photoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="photoModalLabel">入侵图片</h4>
            </div>
            <div class="modal-body "  id="photoDiv">
                <img src="#" id="photoImg">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

    <div class="modal fade" id="allocModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">分配权限</h4>
                </div>

                <div class="modal-body">
                    <form enctype="multipart/form-data" action="{% url 'allocPermisstion' %}" id="allocForm" method="post">
                        <!-- {%csrf_token %} -->
                        <div id="form-userName"></div>
                        <span>
                            <h5 style="display:inline-block; margin-right:10px;">区域分配</h5>
                            <select name="rgn" id="AllocAreaSelect" style="margin:10px 0px;">
                                <!-- {% for rgn in rgns %} -->
                                <option value="{{rgn.cameraId}}/{{rgn.regionName}}">{{rgn.cameraId}} {{rgn.regionName}}</option>
                                <!-- {% endfor %} -->
                            </select>
                        </span>

                        <div class="panel panel-success panel_div">
                            <div class="panel-heading">
                                <h3 class="panel-title">开始时间</h3>
                            </div>

                            <div class="form-group">
                                <div class="time">
                                    <div class="input-group">
                                        <input type="text" class="form-control form_datetime" id="startTime"
                                            name="allocStartTime" placeholder="开始时间">
                                        <span class="input-group-addon" id="Span2">
                                            <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="panel panel-info panel_div">
                            <div class="panel-heading">
                                <h3 class="panel-title">结束时间</h3>
                            </div>
                            <div class="form-group">
                                <div class="time">
                                    <div class="input-group">
                                        <input type="text" class="form-control form_datetime" id="endTime"
                                            name="allocEndTime" placeholder="结束时间">
                                        <span class="input-group-addon" id="Span1">
                                            <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick= 'allocFormSubmit()'>提交</button>
                </div>
            </div>
        </div>
    </div>

		<div class="menuToggle"></div>
		  <div class="sidebar">
		    <ul>
		      <li class="logo" style="--bg: #333;">
		        <a href="">
		            <div class="icon"><img style="width: 80px;" src="../media/back/gas.png" alt="Gas Station Icon"></div>
		          <div class="text">智慧加油站</div>
		        </a>
		      </li>
		      <div class="menu-list">
		     <!--   <li style="--bg:#f44336;" class="active">
		          <a href="#">
		            <div class="icon"><ion-icon name="home-outline"></ion-icon></div>
		            <div class="text">首页</div>
		          </a>
		        </li> -->
		              <!-- <li><a href="{% url 'gly-rt-monitor' %}">实时监控</a> </li>
		                        <li><a href="{% url 'record' %}"> 查看入侵记录 </a></li>
		                          <li><a href="{%url 'vedioPage' %}"> 查看视频 </a></li>
		                        <li> <a href="{% url 'statistic' %}"> 入侵统计</a></li> -->
		        <li style="--bg:darkblue;">
		         <a href="{% url 'gly-rt-monitor' %}">
		            <div class="icon"><ion-icon name="eye-outline"></ion-icon></div>
		            <div class="text">实时监控</div>
		          </a>
		        </li>

		        <li style="--bg:springgreen;">
		         <a href="{% url 'record' %}">
		            <div class="icon"><ion-icon name="warning-outline"></ion-icon></div>
		            <div class="text">查看入侵</div>
		          </a>
		        </li>

<!--		        <li style="&#45;&#45;bg:#ffa117;">-->
<!--		          <a href="{%url 'vedioPage' %}">-->
<!--		            <div class="icon"><ion-icon name="videocam-outline"></ion-icon></div>-->
<!--		            <div class="text">查看视频</div>-->
<!--		          </a>-->
<!--		        </li>-->

		        <li style="--bg:#292c39;">
		         <a href="{% url 'statistic' %}">
		            <div class="icon"><ion-icon name="analytics-outline"></ion-icon></div>
		            <div class="text">入侵统计</div>
		          </a>
		        </li>

<!--		        <li style="&#45;&#45;bg:purple;">-->
<!--		        <a href="#" data-toggle="modal" data-target="#myModal">-->
<!--		            <div class="icon"><ion-icon name="person-outline"></ion-icon></div>-->
<!--		            <div class="text">行人信息导入</div>-->
<!--		          </a>-->
		        </li>
				  {% if status > 0 %}
				<li style="--bg:#6666cc;"class="active">
				  <a href="{% url 'infoManager' %}">
				    <div class="icon"><ion-icon name="document-outline"></ion-icon></div>
				    <div class="text">信息管理</div>
				  </a>
				</li>
				   {% endif %}
<!--				<li style="&#45;&#45;bg:#333;">-->
<!--				  <a href="{% url 'setMonitorPage' %}">-->
<!--				    <div class="icon"><ion-icon name="settings-outline"></ion-icon></div>-->
<!--				    <div class="text">监控区域设置</div>-->
<!--				  </a>-->
<!--				</li>-->
		      </div>
			  <div class="bottom">
			    <li style="--bg:#333;">
			      <a href="#">
			        <div class="icon">
			          <div class="imgBx">
			            <img src="../media/video/images/user.jpg" alt="user">
			          </div>
			        </div>
			        <div class="text">manager</div>
			      </a>
			    </li>

			    <li style="--bg:#333;">
			      <a href="{% url 'login'%}">
			        <div class="icon"><ion-icon name="log-out-outline"></ion-icon></div>
			        <div class="text">退出</div>
			      </a>
			    </li>

			  </div>
		    </ul>

		  </div>

	<style>

	.container1 {
	    width: 1300px;
	    height: 340px;
	    margin: auto;
	  border: 1px solid white;
	    padding: 20px;
	    box-sizing: border-box;
	  /* outline: 1px solid black; */

	    position: relative;
	    top: 20px; /* 将 top 属性值设为负数 */
	    left: 50px;
	    font-family: Arial, sans-serif;
	    overflow: auto;
		}

	.table-wrapper {
	    max-height: 100%;
	    overflow: hidden;
	}

	.table {
	    width: 100%;
	    border-collapse: collapse;
	    margin-top: 20px;
	    table-layout: fixed;
		position : sticky
	}

	.table th,
	.table td {
	    padding: 15px;
	    text-align: left;
	    border: 1px solid #ccc;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
/* 		width:100px;
		height:30px; */
	}

	.table th {
	    background-color: #666699;
	    color: #fff;
	    font-weight: bold;
		/* padding: 10px 2px 10px 15px; */
	}

	.table tr:nth-child(even),
	.table tr:nth-child(odd) {
	    background-color: white;
	}

	.table tr:hover {
	    background-color:  rgba(200, 150, 255, 0.8);;
	    color: #fff;
	}

	.table td:empty::before {
	    color: #999;
	    font-style: italic;
	}

	.table td:empty:hover::before {
	    color: #e67e22;
	}

	  </style>
	  <div class="container1" style="  background-color: rgba(200, 150, 255, 0.5); /* 设置淡紫色透明背景 */">
		  <div class="container-fluid ">
		                      <div class="row " style="font-size: 35px;background-color:#6666cc;" >
		                          <div class="col-md-2 col-md-offset-1" style="padding:0px 0px;margin-top: -4%;"><!-- 上下占据位置 -->
		                              <!-- <span style="font-size: 24px; color: white;">ID</span> -->
									  <br>
		                              <input placeholder="ID搜索" name="cname" type="text" id="draft_search"
		                                  onkeyup="search('draft_search','userRecord-table',1)">
		  								<!-- 实现根据日期缩短查询(未实现) -->
		                              <!-- <input id="startTime" type="date"
		                                  style="width: 100px;background-color: #303f60;color: #6b7da3;">
		                              <span style="color: #6489d0;  margin:0px 5px">至</span>
		                              <input id="endTime" type="date" style="background-color: #303f60;color: #6b7da3;"> -->
		                          </div>
								  <style>
								      /* 外层容器样式 */
								      .monitorcon_content_div {
								          max-width: 300px;
								          margin: 0 auto;
								          text-align: center;
								      }

								      /* 下拉选择框样式 */
								      .selectDiv select {
								          width: 100%;
								          padding: 8px;
								          border: 1px solid #ccc;
								          border-radius: 4px;
								          box-sizing: border-box;
								          font-size: 14px;
								          color: #555;
								      }
								  </style>


		                          <div class="col-md-2 col-md-offset-2" style="padding:0px 30px;">
									  <div class="monitorcon_content_div">

									      <div class="selectDiv">
		                              <select name="" id="">
		                                  <option value="摄像头1">摄像头1</option>
		                                  <option value="摄像头2">摄像头2</option>
		                                  <option value="摄像头3">摄像头3</option>
		                                  <option value="摄像头4">摄像头4</option>
		                              </select>
		                          </div>
		                      </div>
							    </div>
								<div class="col-md-2 col-md-offset-1">
								    <button class="btn btn-primary mybtn" id="query-btn">查询</button>
								 <!--   <button class="btn btn-success mybtn">删除</button> -->
								</div>
							  <div class="col-md-1 ">
							       <button class="btn btn-info mybtn" onclick="Export('userRecord-table')">导出</button>
							  <!--     <button class="btn btn-success mybtn">删除</button> -->
							   </div>


		                  </div>

		                      <table class="table" id="userRecord-table">
		                          <thead>
		  							<!-- <th>序号</th>
		  							<th>手机号</th>
		  							<th>邮箱</th>
		  							<th>权限</th>
		  							<th>注册时间</th>
		  							<th>操作</th> -->
		  							<th>序号</th>
		  							<th>ID</th>
		                            <th>邮箱</th>
		  							<th>权限</th>
		  							<th>姓名</th>
		                            <th>删除操作</th>
									<th>升级为管理员</th>
		                          </thead>

		                         <tbody id="record-tablebody1">

		                              {% for rec in records2 %}
		                                  <tr>
		                                      <td>{{ forloop.counter }}</td>
		                                      <td>{{rec.username}}</td>
		                                      <td>{{rec.email}}</td>
		                                      <td>
		                                          {% if rec.is_staff == 0 %}
		                                                普通用户
		                                          {% elif rec.is_superuser == 0 %}
		                                                管理员
		                                          {% else %}
		                                                超级用户
		                                          {% endif %}
		                                      </td>
		                                      <td>{{rec.date_joined}}</td>
		                                      <td></td>
		                                      <td></td>
		                                  </tr>
		                              {% endfor %}
		                          </tbody>
		                      </table>
		              </div>
	  </div>

	  <style>
		  .container2 {
		      width: 1300px;
		      height: 340px;
		      margin: auto;
		     border: 1px solid white
		      padding: 20px;
		      box-sizing: border-box;
		  outline: 1px solid white;
		      position: relative;
		      top: 20px; /* 将 top 属性值设为负数 */
		      left: 45px;
		      font-family: Arial, sans-serif;
		      overflow: auto;
		  }

	  </style>
	  <br />
	  <br/>

	  <div class="container2" style="  background-color: rgba(200, 150, 255, 0.5); /* 设置淡紫色透明背景 */">
		    <!-- Button to trigger the modal -->

		  <div id="monitorcontrol_content_div" >
		                      <div id="monitorcontrol_content_top_div"style="background-color:#6666cc;">可信人员名单</div>
 <button type="button" class="btn btn-info mybtn"  style="margin-left:200px;margin-top:-4%;background-color:purple" data-toggle="modal" data-target="#myModal">录入信息</button>

    <!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="border: 2px solid white" >
        <div class="modal-content"style="background-color:rgba(200, 170, 210, 0.8)">
            <div class="modal-header dark-matter"style="background-color:rgba(200, 170, 210, 0.5);">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel1">新人信息录入</h4>
                <span >录入照片</span>
            </div>
            <div class="modal-body" >
                <form enctype="multipart/form-data" action="{% url 'trustedStaffForm' %}" method="post" class="dark-matter" id="trustForm" style="background-color:rgba(200, 170, 210, 0.8);border: 1px solid white">
                      {%csrf_token %}
                    <label>
                        <span>姓名 :</span>
                        <input id="name" type="text" name="name" placeholder="姓名"/>

                    </label>

                    <label>

                        <span>年龄:</span>

                        <input id="age" type="text" name="age" placeholder="年龄"/>

                    </label>

                    <label>
                        <span>性别:</span>
                        <select name="selection">
                            <option value="man">男</option>
                            <option value="woman">女</option>
                        </select>
                    </label>
                    <label>
                        <span>邮箱 :</span>
                        <input id="email" type="email" name="email" placeholder="有效的邮箱地址"/>
                    </label>

                    <label>
                        <span >人脸照片 :</span>
                        <img id="image-preview" width="200" height="200"style="border:  1px solid white;">
                        <input style="margin-left:170px;" type="file" id="file" name="upload_image"
                               accept="image/gif, image/jpeg, image/png, image/jpg">
                    </label>

<!--                    <label style="margin-bottom: 0;">-->
<!--                        <span>&nbsp;</span>-->
<!--                        <input type="button" class="button" value="Send"/>-->
<!--                    </label>-->
                </form>
            </div>
            <div class="modal-footer" style="background-color:rgba(200, 170, 210, 0.8)">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick=mySubmit('trustForm')>提交</button>
            </div>
        </div>

	</div>
</div>
		                          <table class="table" id="record-table">
		                              <thead>
		  								<!-- <th>序号</th>
		  								<th>ID</th>
		  								<th>姓名</th>
		  								<th>邮箱</th>
		  								<th>性别</th>
		  								<th>年龄</th>
		  								<th>权限</th>
		                                  <th>图像</th> -->
		  								<th>序号</th>
		  								<th>姓名</th>
		  								<th>性别</th>
		  								<th>年龄</th>
		  								<th>邮箱</th>
		  								<th>图片</th>
		  								<th>删除操作</th>
										<th>权限分配</th>
		                              </thead>

		                             <tbody id="record-tablebody2">
		                                  {% for rec in records1%}
		                                      <tr>
		                                          <td>{{ forloop.counter }}</td>
		                                          <td>{{rec.name}}</td>
		                                          <td>{{rec.sex}}</td>
		                                          <td>{{rec.age}}</td>
		                                          <td>{{rec.email}}</td>
		                                          <td></td>
		                                          <td></td>
												  <td></td>

		                                      </tr>

		                                  {%endfor%}
		                              </tbody>
		                          </table>
		                      </div>
		                  </div>
		              </div>
		          </div>



    <script src="/static/js/echarts.min.js"></script>
    <script src="/static/js/jquery.table2excel.js"></script>

	<!-- 后端 -->
	<script src="js/script.js"></script>
	<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
	<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

	<script>
	  const menuToggle = document.querySelector('.menuToggle'),
	        sidebar = document.querySelector('.sidebar'),
	        Menulist = document.querySelectorAll('.menu-list li')
	  menuToggle.onclick = function(){
	    menuToggle.classList.toggle('active')
	    sidebar.classList.toggle('active')
	  }

	  function activeLink() {
	    Menulist.forEach((item) =>
	      item.classList.remove('active')
	    )
	    this.classList.add('active')
	  }

	  Menulist.forEach((item) =>
	    item.addEventListener('click', activeLink)
	  )
	</script>
	<script>
	  const modal = document.getElementById('myModal');
	  const invasionLink = document.querySelector('.menu-list li a[href="#record"]');
	  const monitoringLink = document.querySelector('.menu-list li a[href="#gly-rt-monitor"]');
	  const pedestrianImportLink = document.querySelector('.menu-list li a[href="#person-import"]');
	  const infoManagerLink = document.querySelector('.menu-list li a[href="#info-manager"]');
	  const setMonitorLink = document.querySelector('.menu-list li a[href="#set-monitor"]');
		const setvedioPageLink = document.querySelector('.menu-list li a[href="#vedioPage"]');

	  modal.addEventListener('hidden.bs.modal', function () {
	    invasionLink.parentElement.classList.add('active');
	  });

	  modal.querySelector('button[type="submit"]').addEventListener('click', function () {
	    invasionLink.parentElement.classList.add('active');
	  });
	</script>

    <script>
        function allocFormSubmit(){
                var allocForm = document.getElementById('allocForm');
                var name= allocForm.querySelectorAll('#form-userName span')[1].innerHTML;
                var input =document.createElement('input');
                input.setAttribute('name','name');
                input.setAttribute('value',name);
                allocForm.append(input);
                allocForm.submit();
        }
         var num3 = {{ num3|safe }};
         var tabletrs3 = document.querySelectorAll('#record-tablebody3 tr');
         for(var i=0; i<num3;i++){
            var td1=tabletrs3[i].children[6];
            td1.innerHTML = ' <form action="'+ " {%  url 'deleteRecord_truPermission' %} "+'"'+ ' method="post" >' + '{% csrf_token %}'+'<a href="javascript:;"  class="btn btn-warning">删除</a></form>';
            var a=td1.getElementsByTagName('a')[0];
            a.onclick=function(){
                var tbod=document.getElementById('record-tablebody3');
                tbod.removeChild( this.parentNode.parentNode.parentNode);
                var name=this.parentNode.parentNode.parentNode.children[1].innerHTML;
                var cameraName=this.parentNode.parentNode.parentNode.children[2].innerHTML;
                var reginName=this.parentNode.parentNode.parentNode.children[3].innerHTML;
                var startTime=this.parentNode.parentNode.parentNode.children[4].innerHTML;
                var endTime=this.parentNode.parentNode.parentNode.children[5].innerHTML;

                var form =this.parentNode;
                var input1 =document.createElement('input');
                input1.setAttribute('name','name');
                input1.setAttribute('value',name);
                var input2 =document.createElement('input');
                input2.setAttribute('name','cameraName');
                input2.setAttribute('value',cameraName);
                var input3 =document.createElement('input');
                input3.setAttribute('name','reginName');
                input3.setAttribute('value',reginName);
                var input4 =document.createElement('input');
                input4.setAttribute('name','startTime');
                input4.setAttribute('value',startTime);
                var input5 =document.createElement('input');
                input5.setAttribute('name','endTime');
                input5.setAttribute('value',endTime);
                form.append(input1);
                form.append(input2);
                form.append(input3);
                form.append(input4);
                form.append(input5);
                document.body.appendChild(form);
                form.submit();
            }
         }

    var num1 = {{ num1|safe }};
    var urls1= {{images1|safe}};

    var tabletrs1=document.querySelectorAll('#record-tablebody2 tr');
    for(var i=0; i<num1;i++){
       var td=tabletrs1[i].children[5];
       td.innerHTML='<button class="btn btn-info">详情</button>';
       var but=td.children[0];
       but.setAttribute('data-toggle', 'modal');
       but.setAttribute('data-target', '#photoModal');
       but.onclick=function(){
            var img=document.getElementById('photoImg');
            var id=this.parentNode.parentNode.children[0].innerHTML;
            img.setAttribute("src",urls1[id-1]);
            <!-- img.style.src=urls[i];
       }

        var td1=tabletrs1[i].children[6];
        td1.innerHTML = ' <form style="display:inline-block" action="'+ " {%  url 'deleteRecord_trust' %} "+'"'+ ' method="post" >' +
         '{% csrf_token %}'+'<a style="display:inline-block" href="javascript:;"  class="btn btn-warning">删除</a></form>';
        var a=td1.getElementsByTagName('a')[0];
        a.onclick=function(){
            var tbod=document.getElementById('record-tablebody2');
            tbod.removeChild( this.parentNode.parentNode.parentNode);
            var id=this.parentNode.parentNode.parentNode.children[1].innerHTML;

            var form =this.parentNode;
            var input =document.createElement('input');
            input.setAttribute('name','id');
            input.setAttribute('value',id);
            form.append(input);
            document.body.appendChild(form);
            form.submit();
        }

        var td2=tabletrs1[i].children[7];
        td2.innerHTML='<button class="btn btn-primary " ">分配权限</button>';
        var butto=td2.getElementsByTagName('button')[0];
        butto.onclick = function () {
                // data-toggle="modal" data-target="#myModal"
                this.setAttribute('data-toggle', 'modal');
                this.setAttribute('data-target', '#allocModal');
                var td1 = this.parentNode.parentNode.children[1];
                var allocForm_div = document.getElementById('form-userName');
                allocForm_div.innerHTML = '<span>姓名:</span>' +'<span>'+ td1.innerHTML + '</span>';

        }

    }

    var num2 = {{ num2|safe }};
    var tabletrs=document.querySelectorAll('#record-tablebody1 tr');
    for(var i=0; i<num2;i++){
        var td1=tabletrs[i].children[5];
        td1.innerHTML = ' <form action="'+ " {%  url 'deleteRecord_user' %} "+'"'+ ' method="post" >' + '{% csrf_token %}'+'<a href="javascript:;"  class="btn btn-warning">删除</a></form>';
        var a=td1.getElementsByTagName('a')[0];
        a.onclick=function(){
            var tbod=document.getElementById('record-tablebody1');
            tbod.removeChild( this.parentNode.parentNode.parentNode);
            var id=this.parentNode.parentNode.parentNode.children[1].innerHTML;

            var form =this.parentNode;
            var input =document.createElement('input');
            input.setAttribute('name','id');
            input.setAttribute('value',id);

            form.append(input);
            document.body.appendChild(form);
            form.submit();
        }

        var status=tabletrs[i].children[3].innerHTML;

        console.log( status.replace(/(^\s*)|(\s*$)/g, ""));
         console.log( status.replace(/(^\s*)|(\s*$)/g, "")=='普通用户');
        if ( status.replace(/(^\s*)|(\s*$)/g, "") =='普通用户'){
            var td1=tabletrs[i].children[6];
            td1.innerHTML = ' <form action="'+ " {%  url 'alloc_user' %} "+'"'+ ' method="post" >' + '{% csrf_token %}'+'<a href="javascript:;"  class="btn btn-info">升级为管理员</a></form>';
            var butt=td1.getElementsByTagName('a')[0];
            butt.onclick=function(){
                    var status1=this.parentNode.parentNode.parentNode.children[3].innerHTML;
                    var name=this.parentNode.parentNode.parentNode.children[1].innerHTML;
                    var form =this.parentNode;
                    var input1 =document.createElement('input');
                    input1.setAttribute('name','name');
                    input1.setAttribute('value',name);
                    form.append(input1);
                    document.body.appendChild(form);
                    form.submit();
             }
        }
    }

    function mySubmit(formId){
        var form=document.getElementById(formId);
        form.submit();
    }
        var myChart = echarts.init(document.querySelector('.brightDiv'));
        var option = {
            title: {
                text: '权限数据可视化'
            },
            tooltip: {},
            legend: {
                data: ['每个摄像头对应的有相关权限的人的个数']
            },
            xAxis: {
                data: ['摄像头1', '摄像头2', '摄像头3', '摄像头4']
            },
            yAxis: {},
            series: [
                {
                    name: '每个摄像头对应的有相关权限的人的个数',
                    type: 'bar',
                    data: {{nums}}
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        function Export(id) {
            $('#' + id).table2excel({
                filename: "record.xls"
            });
        }

        $('.form_datetime').datetimepicker({
            format: 'yyyy-mm-dd hh:ii:ss',
            autoclose: true,
            /* minView: "month",  *///选择日期后，不会再跳转去选择时分秒
            language: 'zh-CN',
            dateFormat: 'yyyy-mm-dd',//日期显示格式
            timeFormat: 'HH:mm:ss',//时间显示格式
            todayBtn: 1,
            autoclose: 1,
            minView: 0,  //0表示可以选择小时、分钟   1只可以选择小时
            minuteStep: 1//分钟间隔1分钟
        });
        $(document).ready(function () {
            var trigger = $('.hamburger'),
                overlay = $('.overlay'),
                isClosed = false;
            trigger.click(function () {
                hamburger_cross();
            });
            function hamburger_cross() {
                if (isClosed == true) {
                    overlay.hide();
                    trigger.removeClass('is-open');
                    trigger.addClass('is-closed');
                    isClosed = false;
                } else {
                    overlay.show();
                    trigger.removeClass('is-closed');
                    trigger.addClass('is-open');
                    isClosed = true;
                }
            }
            $('[data-toggle="offcanvas"]').click(function () {
                $('#wrapper').toggleClass('toggled');
            });
        });

<!--        var tbody3 = document.getElementById('record-tablebody3');-->
<!--        for (var i = 0; i < data.length; i++) {-->
<!--            var tr = document.createElement('tr');-->
<!--            tbody3.appendChild(tr);-->
<!--            for (var obj in data[i]) {-->
<!--                var td = document.createElement('td');-->

<!--                tr.appendChild(td);-->
<!--                td.innerHTML = data[i][obj];-->
<!--            }-->


<!--            var td = document.createElement('td');-->
<!--            td.innerHTML = '<a href="javascript:;"  class="btn btn-warning deleteBut">删除</a> '-->
<!--            tr.appendChild(td);-->
<!--        }-->

<!--        var table3_deleteButs = document.querySelectorAll('#record-tablebody3 .deleteBut');-->
<!--        for (var i = 0; i < as.length; i++) {-->
<!--            table3_deleteButs[i].onclick = function () {-->
<!--                tbody3.removeChild(this.parentNode.parentNode);-->
<!--            }-->
<!--        }-->

 let fileInput = document.getElementById('file');
    let info = document.getElementById('info');
    let preview = document.getElementById('image-preview');
    // 监听change事件:
    fileInput.addEventListener('change', function () {
        // 清除背景图片:
        preview.style.backgroundImage = '';
        if (!fileInput.value) {
            info.innerHTML = '没有选择文件';
            return;
        }
        let file = fileInput.files[0];
        let size = file.size;
        if (!['image/jpeg', 'image/png', 'image/gif', 'image/jpg'].includes(file.type)) {
            alert('不是有效的图片文件!');
            return;
        }
        // 读取文件:
        let reader = new FileReader();
        reader.onload = function (e) {
            let data = e.target.result;
            console.log(preview, 'a标签')
            preview.src = data
        };
        // 以DataURL的形式读取文件:
        reader.readAsDataURL(file);
    });

        var btn = document.getElementById('query-btn')
        btn.onclick = function () {
            queryTable();
        }
        function queryTable() {
            // startTime,endTime
            startTime = document.getElementById('startTime').value;
            endTime = document.getElementById('endTime').value;
            if (!startTime || !endTime) {
                return
            }
            var startDate = new Date(startTime);
            var endDate = new Date(endTime);
            trs = document.getElementsByTagName('tr');
            for (var i = 1; i < trs.length; i++) {
                var recDate = new Date(trs[i].getElementsByTagName("td")[0].innerHTML);


                if (startDate <= recDate && recDate <= endDate) {
                    trs[i].style.display = '';
                } else {
                    trs[i].style.display = 'none';
                }
            }
        }

        var lis = document.querySelectorAll('#camera-ul li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                var text = this.innerText.replace(/\s+/g, "");
                console.log(text);
                trs = document.getElementsByTagName('tr');
                for (var i = 1; i < trs.length; i++) {
                    var tdText = trs[i].getElementsByTagName("td")[1].innerHTML;
                    console.log(tdText);
                    console.log(tdText == text);
                    if (tdText == text) {
                        trs[i].style.display = '';
                    } else {
                        trs[i].style.display = 'none';
                    }
                }
            }
        }

        function search(inputobj, tableobj, col) {
            // 声明变量
            var input, filter, table, tr, td, i;
            input = document.getElementById(inputobj);
            filter = input.value.toUpperCase();
            table = document.getElementById(tableobj);
            tr = table.getElementsByTagName("tr");
            // 循环表格每一行，查找匹配项
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[col];
                if (td) {
                    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }
    </script>
 <script>
        function mySubmit(formId) {
            // Add your custom submit logic here
            document.getElementById(formId).submit();
        }
    </script>
</body>

</html>